<template>
	<view class="detail-pages pages">
		<CustomNav title="二维码" :active="{textColor:'#fff',background:'#32005B'}" :is-back="true"></CustomNav>
		<image class="top-banner"
			src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/raffle_bg.png"
			mode="widthFix"></image>、
		<view class="content">
			<view class="article-tab"
				style="display: flex; width: 300rpx;justify-content: center;border-radius: 20rpx;">
				<view @click.prevent="noticeActive=1" :class="noticeActive===1?'active':''" class="tab-item"
					style="border-radius: 20rpx 0 0 20rpx;">邀请码</view>
				<view @click.prevent="noticeActive=2" :class="noticeActive===2?'active':''" class="tab-item"
					style="border-radius: 0 20rpx 20rpx 0;">收款码</view>
			</view>
			<view class="info-block" v-if="noticeActive==1">
				<!-- <view class="title">益联生态</view> -->
				<view class="qj" >
					<image @click="saveLocal(info.beautifyInvitationCodeUrl)" v-if="info.beautifyInvitationCodeUrl&&info.beautifyInvitationCodeUrl!=''"
						:src="cloudStorage+info.beautifyInvitationCodeUrl" mode="scaleToFill"></image>
					<image @click="saveLocal(info.invitationCodeUrl)" v-else :src="cloudStorage+info.invitationCodeUrl" mode="widthFix"></image>
				</view>
				<view class="yard">
					<view class="yard-left">邀请码</view>
					<view class="yard-right">{{info.invitationCode}}</view>
				</view>
			</view>
			<view class="info-block" v-if="noticeActive==2">
				<!-- <view class="title">益联生态</view> -->
				<view class="qj">
					<image @click="saveLocal(info.beautifyAccountsCodeUrl)" v-if="info.beautifyAccountsCodeUrl&&info.beautifyAccountsCodeUrl!=''"
						:src="cloudStorage+info.beautifyAccountsCodeUrl" mode="scaleToFill"></image>
					<image @click="saveLocal(info.transferAccountsCodeUrl)" v-else :src="cloudStorage+info.transferAccountsCodeUrl" mode="widthFix"></image>
					
				</view>
				<view class="yard">
					<view class="yard-left">收款码</view>
					<view class="yard-right">{{info.invitationCode}}</view>
				</view>
			</view>
		</view>
		<view class="info-item" @click="showDialog = true">
			<view class="accounts">转账</view>
			<view class="iconfont icon-gengduo"></view>
		</view>
		<view v-if="showDialog" class="dialog">
			<view style="display: flex;width: 100%;">
				<view class="title FZHZGBJ">邀请码或手机号转账</view>
				<view class="iconfont icon-a-guanbi" @click="showDialog = false"></view>
			</view>
			<input v-model="form.number" placeholder="请输入邀请码或手机号" type="number" maxlength="11" />
			<view class="btn" @click="scanCode">确 定</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/home.js';
	import {
		validate
	} from '@/util/validate.js'
	export default {
		data() {
			return {
				info: {
					invitationCodeUrl: '',
					invitationCode: '',
					transferAccountsCodeUrl: ''
				},
				noticeActive: 1,
				showDialog: false,
				form: {
					number: '',
				},
				rules: {
					number: {
						name: '邀请码或手机号',
						required: true
					},
				},
			}
		},
		methods: {
			saveLocal(url) {
				uni.downloadFile({
					url: this.cloudStorage + url,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "您取消了保存",
										icon: "none"
									});
								}
							});
						}
					}
				})

			},
			getUser() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getUserInfo().then((res) => {
					this.info = res
				})
			},
			scanCode() {
				if (validate(this.form, this.rules)) {
					uni.showLoading({
						title: '加载中',
						mask: true,
					})
					uni.navigateTo({
						url: '/page_other/accounts/accounts?code=' + this.form.number
					})
				}
			}
		},
		onLoad() {
			this.getUser()
		},
	}
</script>
<style lang="scss" scoped>
	.detail-pages {
		overflow: hidden;

		.top-banner {
			width: 100%;
			position: absolute;
		}

		.content {
			width: 100%;
			position: relative;
			margin-top: 200rpx;
			// display: flex;
			// flex-direction: column;
			// align-items: center;

			.article-tab {
				box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
				height: 70rpx;
				margin: 30rpx auto;
			}

			.tab-item {
				width: 50%;
				height: 100%;
				text-align: center;
				background-color: #fff;
				color: rgb(255, 78, 37);
				line-height: 70rpx;
			}

			.tab-item.active {
				background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
				color: #FFFFFF;
			}

			.info-block {
				padding: 30rpx;
				position: relative;
				width: calc(100% - 80rpx);
				border-radius: 20rpx;
				background-color: #FFFFFF;
				// background-image: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/code-bg.png');
				background-size: 100%;
				margin-bottom: 30rpx;
				margin: auto;

				.title {
					width: 100%;
					font-family: FZHanZhenGuangBiaoS-GB;
					font-size: 30px;
					text-align: center;
					margin: 50rpx 0;
					color: #FF6B18;
				}

				.qj {
					width: 300px;
					height: 500px;
					margin: 0 auto 50rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.yard {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-around;
					height: 120rpx;
					margin-top: 60rpx;

					.yard-left {
						font-size: 14px;
						font-weight: normal;
						line-height: normal;
						letter-spacing: 0em;
						color: #767676;
					}

					.yard-right {
						font-size: 30px;
						font-weight: normal;
						line-height: normal;
						text-align: right;
						letter-spacing: 0em;
					}
				}
			}

		}

		.info-item {
			position: relative;
			display: flex;
			justify-content: space-between;
			padding: 40rpx 30rpx;
			background-color: #FFFFFF;
			width: calc(100% - 80rpx);
			margin: 30rpx auto;
			border-radius: 20rpx;

			.accounts {}

		}

		.dialog {
			width: 80%;
			max-width: 500rpx;
			padding: 40rpx;
			background-color: white;
			border-radius: 20rpx;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 1000;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.title {
			width: 100%;
			height: 60rpx;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.dialog input {
			width: 100%;
			height: 60rpx;
			padding-left: 20rpx;
			border: 1px solid #ddd;
			border-radius: 10rpx;
			margin-bottom: 40rpx;
		}

		.iconfont {
			display: flex;
			justify-content: flex-end;
		}

		.dialog .btn {
			width: 180rpx;
			height: 60rpx;
			font-size: 28rpx;
			background: linear-gradient(to right, #FF2F34, #FF6B18);
			border-radius: 60rpx;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>